<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html {
            font-family: sans-serif;
            background: #ffc600;
        }

        .inbox {
            max-width: 400px;
            margin: 50px auto;
            background: white;
            border-radius: 5px;
            box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
        }

        .item {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #F1F1F1;
        }

        .item:last-child {
            border-bottom: 0;
        }


        input:checked+p {
            background: #F9F9F9;
            text-decoration: line-through;
        }

        input[type="checkbox"] {
            margin: 20px;
        }

        p {
            margin: 0;
            padding: 20px;
            transition: background 0.2s;
            flex: 1;
            font-family: 'helvetica neue';
            font-size: 20px;
            font-weight: 200;
            border-left: 1px solid #D1E2FF;
        }

        .details {
            text-align: center;
            font-size: 15px;
        }
    </style>
</head>

<body>

    <!--
   The following is a common layout you would see in an email client.

   When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.

  -->
    <div class="inbox">
        <div class="item">
            <input type="checkbox">
            <p>这是一个邮件收件箱</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>选中一项</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>然后按住 Shift 键</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>选择另外一项</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>它们之间的都会被选中</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>试着实现这个功能</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>只用原生 JS </p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Good Luck!</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>记得展示你的成果♪(^∇^*)</p>
        </div>
    </div>

    <script>
        const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]'); // 获取所有复选框

        checkboxes.forEach(box => box.addEventListener('click', handleShift));

        let lastChecked; // 记录上一个点击的框

        function handleShift(e) {
            const boxArr = Array.from(checkboxes);

            console.log(e.target === this);

            // inBetween做开关
            let inBetween = false;
            // e.shiftKey判断鼠标按下时, 是否同时按下shift
            if (e.shiftKey && this.checked) {
                // const start = boxArr.indexOf(this);
                // const end = boxArr.indexOf(lastChecked);
                // console.log(start + ' and ' + end);

                checkboxes.forEach(box => {
                    if (box === this || box === lastChecked) {
                        // 当checkbox是选中项时, 把inBetween打开, 打开时选中框, 为最后一项时关闭开关
                        inBetween = !inBetween;

                    }
                    if (inBetween) {
                        box.checked = true;
                    }
                });

            }
            lastChecked = this;
        }

    </script>
</body>

</html>